<template>
  <PageBox :data="dataInfo" @searchBtn="getTbody">
    <template #employeeSex="{ row }">
      <ElTagBox :data="row.employeeSex" :options="proxy.$optionsArr.sex" />
    </template>
    <template #accountState="{ row }">
      <ElTagBox :data="row.accountState" :options="options.state" />
    </template>
    <template #headR>
      <el-button type="primary" icon="Plus" @click="addBtn" v-permission="`MenuCode7-1-1`">新建</el-button>
    </template>
  </PageBox>
  <ElPupFormBox :pup="pup">
    <template #default>
      <ElFormItemBox label="员工工号" :prop="`loginAccount`" isRules>
        <ElInputBox :data="pup.form" dataName="loginAccount" />
      </ElFormItemBox>
      <ElFormItemBox label="员工名称" :prop="`employeeName`" isRules>
        <ElInputBox :data="pup.form" dataName="employeeName" />
      </ElFormItemBox>
      <ElFormItemBox label="性别" :prop="`employeeSex`" isRules>
        <ElRadioBox :data="pup.form" dataName="employeeSex" :options="proxy.$optionsArr.sex" />
      </ElFormItemBox>
      <ElFormItemBox label="手机号码" :prop="`mobile`" isRules :rules="[
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式', trigger: 'blur' }
      ]">
        <ElInputBox :data="pup.form" dataName="mobile" />
      </ElFormItemBox>
      <ElFormItemBox label="部门" :prop="`departmentCode`" isRules>
        <ElSelectBox :data="pup.form" dataName="departmentCode" :options="dataInfo.tabs.list"
          :labelName="dataInfo.tabs.titleKey" :valueName="dataInfo.tabs.activeKey" />
      </ElFormItemBox>
      <ElFormItemBox label="角色权限" :prop="`roleCode`" isRules>
        <ElSelectBox :data="pup.form" dataName="roleCode" :options="options.roles" />
      </ElFormItemBox>
    </template>
  </ElPupFormBox>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance() as any;
import './pageCss.scss'; // 引入样式
import { useListComponent } from './pageTs'; // 引入逻辑
const { dataInfo, getTbody, options } = useListComponent();
const addBtn = () => {
  pup.state = true
  pup.form.departmentCode = dataInfo.tabs.active
  pup.form.organizationCode = dataInfo.tabs.organizationCode
}
const pup = reactive({
  state: false,
  typeName: 0,
  title: `新建人员`,
  width: 600,
  height: 'auto',
  form: {
    loginAccount: "", // 员工账号（工号）
    employeeName: "", // 员工姓名
    mobile: "", // 联系电话
    departmentCode: '', // 部门编号
    organizationCode: '', // 机构编码
    roleCode: "", // 角色编码
    employeeSex: 1 // 员工性别：1表示男；2表示女
  },
  btns: [
    {
      title: '保存',
      type: 'primary',
      click: (pup: any, resetForm: Function) => {
        proxy.$api.Business.RegisterNewEmployee(pup.form)
          .then((res: any) => {
            pup.state = false
            proxy.$message('保存成功');
            resetForm()//重置
            getTbody()
          })
          .catch(() => { });

      }
    }
  ]
});

</script>